<template>
  <div class="dashboard-container">
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <div class="tit">
          <i class="el-icon-warning color-danger" style="margin-left: 20px"/>
          <span class="color-danger">{{ $t('detail.operation') }}</span>
        </div>

        <div class="btn">
          <el-button size="small" type="primary">{{ $t('detail.ordertracking') }}</el-button>
        </div>
      </div>

      <!-- 基本信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: rgb(64, 158, 255)"/>
        <span class="font-small">{{ $t('detail.basicinformation') }}</span>
      </div>

      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.orderid') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.buyname') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.time') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.distance') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.tell') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.address') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ orderDetailList.id }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.name }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.order_lead_time }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.distance }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.phone }}</el-col>
          <el-col :span="4" class="table-cell">
            <el-popover
              :content="orderDetailList.address"
              :title="$t('detail.address')"
              placement="top-start"
              width="auto"
              trigger="hover">
              <span slot="reference">{{ orderDetailList.address }}</span>
            </el-popover>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.class') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.describe') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.combination') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.grade') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.latitude') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.longitude') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">￥{{ orderDetailList.rating }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.description }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.promotion_info }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.rating }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.latitude }}</el-col>
          <el-col :span="4" class="table-cell">{{ orderDetailList.longitude }}</el-col>
        </el-row>
      </div>

      <!-- 商品信息 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: rgb(64, 158, 255)"/>
        <span class="font-small">{{ $t('detail.message') }}</span>
      </div>

      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.goodsid') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.color') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.goodsname') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.goodsdes') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.odd') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('detail.discounts') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ goodList.id }}</el-col>
          <el-col :span="4" class="table-cell">
            <div :style="{'background': goodList.icon_color}" class="bg"/>
          </el-col>
          <el-col :span="4" class="table-cell">{{ goodList.name }}</el-col>
          <el-col :span="4" class="table-cell">{{ goodList.description }}</el-col>
          <el-col :span="4" class="table-cell">{{ goodList._id }}</el-col>
          <el-col :span="4" class="table-cell">{{ goodList.icon_name }}</el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderDetail } from '@/api/order'
export default {
  name: 'SonOrderDetail',
  filters: {
    // 123
  },
  data() {
    return {
      orderDetailList: '', // 详细信息
      goodList: {}
    }
  },
  created() {
    this.orderDetail(this.$route.params)
  },
  methods: {
    // 详情
    orderDetail(userid) {
      const self = this
      const params = {}
      params.id = userid.id
      orderDetail(params).then(res => {
        console.log(res)
        self.orderDetailList = res.result
        self.goodList = res.result.activities[0]
        console.log(self.goodList.id)
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}
.tit {
  float: left;
}
.color-danger {
  color: red;
}
.btn {
  float: right;
  margin-right: 20px;
}
.font-small {
  color: rgb(64, 158, 255);
}
.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}
.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.table-cell-title.h {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 18px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}
.bg {
  width: 50px;
  height: 40px;
  border: 1px solid #000;
  margin-left: 60px;
}
</style>
